<template>
  <!-- w 640px -->
  <div class="b-artist">
    <!-- 第一块 -->
    <div class="c-art-top">
      <!-- 文字 -->
      <div class="c-art-top1">
        <span class="spn1">{{artistList.name}}</span>
        <span class="spn2">{{artistList.alias ?artistList.alias[0]:"" }}</span>
      </div>
      <!-- 图片 -->
      <div class="c-art-img">
        <img :src="artistList.img1v1Url" alt="" />
        <div class="icon">
          <a class="icon1" v-show="artistList.accountId" @click="gouserhome(artistList.accountId)"></a>
          <a class="icon2"></a>
        </div>
      </div>
    </div>
    <!-- 第二快 -->
    <div class="c-art-tow">
      <!-- 136px -->
      <div
        class="c-art-tow1"
        :class="ishav == 1 ? 'haverto1' : ''"
        @click="goArtist"
      >
        热门作品
      </div>
      <div
        class="c-art-tow1"
        :class="ishav == 2 ? 'haverto1' : ''"
        @click="goAllAlbum"
      >
        所有专辑
      </div>
      <div
        class="c-art-tow1"
        :class="ishav == 3 ? 'haverto1' : ''"
        @click="goMv"
      >
        相关mv
      </div>
      <div
        class="c-art-tow1"
        :class="ishav == 4 ? 'haverto1' : ''"
        @click="goDesc"
      >
        艺人介绍
      </div>
    </div>

    <HotProduction :trackList="trackList" v-show="ishav == 1" />
    <AllAlbum    v-show="ishav == 2"/>
    <Mv :total = "artistList.mvSize"  v-show="ishav == 3"/>
    <Descs  v-show="ishav == 4" :username="artistList.name"/>
  </div>
</template>

<script>
import HotProduction from "../Childrens/HotProduction";
import AllAlbum from "../Childrens/AllAlbum";
import Mv from "../Childrens/Mv";
import Descs from "../Childrens/Descs";
export default {
  components: {
    HotProduction,
    AllAlbum,
    Mv,
    Descs
  },
  data() {
    return {
      id: this.$route.query.id,
      ishav: 1,
      //   歌单列表
      trackList: [],
      //   图片等资料
      artistList: {},
    };
  },
  mounted() {
    this.getArtists();
    // this.geArtistList();
  },
  methods: {
    // 获取歌曲详情
    async getArtists() {
      const result = await this.$API.reqArtists(this.id);
        console.log(result)
      if (result.code == 200) {
        this.trackList = result.hotSongs || [];
        this.artistList = result.artist || {};
      } else {
        // alert("50首获取失败");
        this.$msg.error("50首获取失败")
        // this.$message
      }
    },
    // 获取歌手信息reqArtistList
    // async geArtistList() {
    //   const result = await this.$API.reqArtistList(this.id);
    //   console.log(result);
    //   if (result.code == 200) {
    //     this.artistList = result.data || {};
    //   } else {
    //     alert("歌手信息");
    //   }
    // },

    goArtist() {
      // console.log(this.id)
      this.ishav = 1;
    },
    goAllAlbum() {
      this.ishav = 2;
    },
    goMv() {
      this.ishav = 3;
    },
    goDesc() {
      this.ishav = 4;
    },
    
    gouserhome(id){
      this.$router.push(`/userhome?id=${id}`)
    }
  },
};
</script>

<style lang="less" scoped>
.b-artist {
  width: 640px;
  margin: 10px auto;
  // 第一块
  .c-art-top {
    .c-art-top1 {
      .spn1 {
        font-size: 16px;
        font-weight: bold;
      }
      .spn2 {
        margin-left: 10px;
        font-size: 12px;
        color: #666;
      }
    }
    .c-art-img {
      position: relative;
      overflow: hidden;
      img {
        margin-top: 5px;
        width: 100%;
        height: 300px;
        object-fit: cover;
      }
      .icon {
        .icon1 {
          display: block;
          position: absolute;
          bottom: 18px;
          right: 116px;
          width: 96px;
          height: 32px;
          background-position: 0 -1156px;
          background-image: url("~@/assets/image/iconall.png");
        }
        .icon2 {
          display: block;
          position: absolute;
          bottom: 18px;
          right: 20px;
          width: 76px;
          height: 32px;
          background-position: 0 -500px;
          background-image: url("~@/assets/image/iconall.png");
        }
      }
    }
  }
  // 第二快
  .c-art-tow {
    display: flex;
    width: 100%;
    margin-top: -4px;
    .c-art-tow1 {
      width: 136px;
      height: 40px;
      border: 1px solid #666;
      // margin: 0 au;
      text-align: center;
      line-height: 40px;
    }
    .haverto1 {
      border-top: 2px solid red;
      border-bottom: none;
    }
  }
}
</style>
